<template>
  <div class="home page">
    <div class="banner">
      <span class="search-wrap" href="javascript:void(0);">
        <input
          type="text"
          class="search"
          placeholder="搜索科室、医生"
          v-model="searchInput"
          @focus="iptFocus"
        />
      </span>
    </div>
    <div class="fast_channel">
      <div
        class="fast_channel_l"
        @click="goAppointment"
        v-for="(item1, idx) in firstHomeList.childrenList"
        :key="item1.id"
        v-if="idx == 0"
      >
        <img :src="item1.icon" alt="" />
        <div class="bigtit">{{ item1.name }}</div>
        <div class="tws_box_smalltit">
              {{ item1.descText }}
        </div>
      </div>

      <div class="fast_channel_r">
        <div
          style="position: relative"
          v-for="(item, idx) in firstHomeList.childrenList"
          v-if="idx == 1"
        >
          <div>
            <div class="tws_box_bigtit">
              {{ item.name }}
            </div>
            <div class="tws_box_smalltit">
              {{ item.descText }}
            </div>
          </div>
          <img :src="item.icon" alt="" />
          <wx-open-launch-weapp
            id="launch-btn"
            username="gh_00f8a72ee13c"
            style="
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              z-index: 4000;
            "
          >
            <script type="text/wxtag-template">
              <div style="position: absolute;top: 0; left: 0; width: 100%; height: 100%; opacity: 0;z-index: 4000 "/>
            </script>
          </wx-open-launch-weapp>
        </div>
        <div
          @click="goRecordCopy"
          v-for="(item, idx) in firstHomeList.childrenList"
          v-if="idx == 2"
        >
          <div>
            <div class="tws_box_bigtit">
              {{ item.name }}
            </div>
            <div class="tws_box_smalltit">
              {{ item.descText }}
            </div>
          </div>
          <img :src="item.icon" alt="" />
        </div>
      </div>
    </div>
    <div class="serve_box" v-for="(item, index) in homeList" v-if="index > 0">
      <div class="serve_box_tit">
        <div>
          <span class="dot"></span>
          <div>{{ item.name }}</div>
        </div>
        <div>
          <!-- <span>更多</span>
          <img src="@/assets/right.png" alt="" /> -->
        </div>
      </div>
      <div class="serve_box_info">
        <flexbox :gutter="0" wrap="wrap">
          <flexbox-item
            :span="1 / 3"
            v-for="(v, i) in item.childrenList"
            :key="'b' + i"
          >
            <div class="iconbox" @click="skipPage(v)">
              <img :src="v.icon" alt="" />
              <div>{{ v.name }}</div>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>

    <!--  //弹窗模块-->
    <div v-show="popup" @click="closepopup">
      <!--这里是要展示的内容层-->
      <div class="login" style="margin: 0 auto">
        <div class="iconbox" style="position: relative">
          <img src="http://182.92.162.236:9000/ruoyi/ydkq/image/xck.jpg" alt="" />
          <div>国务院行程卡</div>
          <wx-open-launch-weapp
            id="launch-btn"
            username="gh_0ed5d82fd775"
            style="
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              z-index: 4000;
            "
          >
            <script type="text/wxtag-template">
              <div style="position: absolute;top: 0; left: 0; width: 100%; height: 100%; opacity: 0;z-index: 4000 "/>
            </script>
          </wx-open-launch-weapp>
        </div>

        <div class="iconbox" style="position: relative">
          <img src="http://182.92.162.236:9000/ruoyi/ydkq/image/lstjkm.jpg" alt="" />
          <div>辽事通健康码</div>
          <wx-open-launch-weapp
            id="launch-btn"
            username="gh_3bdf8fd1bfe1"
            style="
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              z-index: 4000;
            "
          >
            <script type="text/wxtag-template">
              <div style="position: absolute;top: 0; left: 0; width: 100%; height: 100%; opacity: 0;z-index: 4000 "/>
            </script>
          </wx-open-launch-weapp>
        </div>
      </div>
      <!--这里是半透明背景层-->
      <div class="over"></div>
    </div>
  </div>
</template>

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import { Tab, TabItem, GridItem, Grid, Flexbox, FlexboxItem } from "vux";
import { getToken } from "@/api/auth";
import {
  indexCfg,
  getDeptInfo,
  getWxOpenId,
  getPatientList,
  getWxSign,
} from "@/api/api";

export default {
  name: "home",
  components: {
    Tab,
    TabItem,
    Flexbox,
    FlexboxItem,
  },
  data() {
    return {
      popup: 0,
      index: 0,
      isbind: false,
      isLogin: false,
      bannerList: [],
      noticeList: [],
      articleList: [],
      homeList: [],
      firstHomeList: [],
      bannerIndex: 0,
      searchInput: "",
    };
  },
  created() {
    this.indexCfg();
    // this.getDeptInfo();
    this.getWxSign();
  },
  mounted() {
    if (getToken()) {
      this.getPatientList();
    } else {
      this.isbind = false;
    }
    console.log(this.$route.query);
    if (this.$route.query.code || window.localStorage.getItem("openId")) {
      if (window.localStorage.getItem("openId")) {
      } else {
        getWxOpenId({
          code: this.$route.query.code,
        }).then((res) => {
          if (res.code == 200) {
            window.localStorage.setItem("openId", res.data);
          }
        });
      }
    } else {
      //正式
      window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3667ca0851ee1da2&redirect_uri=http%3a%2f%2fydkq.eaccessy.com%2f&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
      //测试
      // window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3667ca0851ee1da2&redirect_uri=http%3a%2f%2fydkqyy.eaccessy.com%2f&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
    }
  },
  methods: {
    //打开活动规则页面
    showpopup() {
      this.popup = 1;
    },
    //关闭活动规则页面
    closepopup() {
      this.popup = 0;
    },
    handleErrorFn(e) {
      console.log("fail", e.detail);
    },

    handleLaunchFn(e) {
      console.log("success");
    },
    getWxSign() {
      getWxSign({
        url: window.location.href,
      }).then((res) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["openTagList", "onMenuShareTimeline"], // 必填，需要使用的JS接口列表
          openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });
        wx.ready(function () {
          console.log("ready");
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        });
        wx.error(function (res) {
          console.log("error:" + res);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        });
        var btn = document.getElementById("launch-btn");
        btn.addEventListener("launch", function (e) {
          console.log("success");
        });
        btn.addEventListener("error", function (e) {
          console.log("fail", e.detail);
        });

        var btn1 = document.getElementById("launch-btn1");
        btn1.addEventListener("launch", function (e) {
          console.log("success");
        });
        btn1.addEventListener("error", function (e) {
          console.log("fail", e.detail);
        });
      });
    },
    getPatientList() {
      getPatientList({
        isDefault: "1",
      }).then((res) => {
        if (res.code == 200) {
          if (res.data instanceof Array) {
            this.userInfo = {};
            this.isband = false;
          } else {
            this.userInfo = res.data;
            this.isband = true;
          }
          setTimeout(() => {
            window.localStorage.setItem("isband", this.isband);
            window.localStorage.setItem(
              "defaultUserInfo",
              JSON.stringify(this.userInfo)
            );
            window.localStorage.setItem(
              "userInfo",
              JSON.stringify(this.userInfo)
            );
          }, 500);
        }
      });
    },
    getDeptInfo() {
      getDeptInfo({
        deptId: "",
      }).then((res) => {});
    },
    indexCfg() {
      indexCfg().then((res) => {
        if (res.code == 200) {
          this.homeList = res.data;
          this.firstHomeList = res.data[0];
        }
      });
    },

    skipFun(url) {
      window.location.href = url;
    },
    async skipPage(v) {
      const that = this;
      var url = v.funCode;
      if (v.isOpen == 0) {
        this.$vux.toast.text("暂未开放");
        return;
      }

      if (url == "ZXWZ") {
        this.$vux.toast.text("功能升级，敬请期待");
        return;
      }

      if (url == "YYJS") {
        that.$router.push({ path: "/hosp_introduction" });
        return;
      }
      if (url == "YNDH") {
        that.$router.push({ path: "/campus_choice_nav" });
        return;
      }
      if (url == "KSJS") {
        that.$router.push({ path: "/department_introduced" });
        return;
      }
      if (url == "YSJS") {
        that.$router.push({ path: "/doctor_list" });
        return;
      }
      if (url == "ZHZYSX") {
        that.$router.push({ path: "/notes_list" });
        return;
      }
      if (url == "ZYZYSX") {
        that.$router.push({ path: "/notes_dept" });
        return;
      }

      if (url == "BLFY") {
        if (!getToken()) {
          that.$vux.confirm.show({
            // 组件除show外的属性
            content: "未登录,请先登录账号",
            onCancel() {},
            onConfirm() {
              that.$router.push({ path: "/" });
            },
          });
        } else {
          var copyOpen = await that.isLastDaysOfMonth(3);

          if (copyOpen) {
            this.$vux.toast.text("每月末3天该功能暂停使用");
          } else {
            that.$router.push({ path: "/for_applicants" });
          }
        }
        return;
      }

      if (url == "YQFK") {
        that.showpopup();
        return;
      }
      var or = await that.isLoginAndIsband();
      if (or) {
        if (url == "HSJC") {
          window.localStorage.removeItem("outPayIdx");
          this.$router.push({
            path: "/appointment_next",
            query: {
              deptId: "0060",
              deptName: "核酸检测",
            },
          });
        }

        if (url == "MZJF") {
          window.localStorage.removeItem("outPayIdx");
          that.$router.push({ path: "/outpatient_payment" });
        }

        if (url == "MZJL") {
          window.localStorage.removeItem("outIdx");
          that.$router.push({ path: "/outpatient_records" });
        }
        if (url == "HZPD") {
          that.$router.push({ path: "/waiting_line" });
        }
        if (url == "ZYJL") {
          that.$router.push({ path: "/hospital_records" });
        }
        if (url == "YYXW") {
          that.$router.push({ path: "/hospitalnews" });
        }

        if (url == "YJJCX") {
          that.$router.push({ path: "/accepting_gold_list" });
        }

        if (url == "JCJYBG") {
          that.$router.push({
            path: "/inspection",
          });
        }
      }
      // console.log(url);
    },
    /**
     * 判断是否为当月的最后一天
     */
    isLastDaysOfMonth(days) {
      var flag = new Boolean(true);
      var date = new Date();

      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var today = date.getDate();

      var new_year = year; //取当前的年份
      var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
      if (month > 12) {
        //如果当前大于12月，则年份转到下一年
        new_month -= 12; //月份减
        new_year++; //年份增
      }
      var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
      console.log(new_date);
      var month_last_days = [];
      for (var i = 1; i <= days; i++) {
        month_last_days.push(
          new Date(new_date.getTime() - 1000 * 60 * 60 * 24 * i).getDate()
        );
      }
      // console.log(today);
      // console.log(month_last_days);
      // console.log(month_last_days.indexOf(today));

      if (month_last_days.indexOf(today) == -1) {
        // console.log(123123);
        flag = false;
      }
      console.log(flag);
      return flag;
    },
    isLoginAndIsband() {
      const that = this;
      if (!getToken()) {
        that.$vux.confirm.show({
          // 组件除show外的属性
          content: "未登录,请先登录账号",
          onCancel() {},
          onConfirm() {
            that.$router.push({ path: "/" });
          },
        });
        return false;
      } else {
        if (window.localStorage.getItem("isband") == "false") {
          that.$vux.confirm.show({
            // 组件除show外的属性
            content: "请添加就诊人",
            onCancel() {},
            onConfirm() {
              that.$router.push({ path: "/my_patient" });
            },
          });
          return false;
        } else {
          return true;
        }
      }
    },
    // 获取焦点跳转科室医生搜索
    iptFocus() {

      this.$router.push({
        path: "/doctor_search",
      });
    },
    onIndexChange(idx) {
      this.bannerIndex = idx;
    },

    checkUser(link) {
      this.$api.family.list().then((res) => {
        if (res.code == 200) {
          if (res.data == null) {
            // window.location.href = h5BaseUrl + 'registration'
            this.$router.push("/registration");
          } else {
            // window.location.href = h5BaseUrl + link.replace('/', '')
            this.$router.push(link);
          }
        }
      });
    },

    //跳转预约挂号
    async goAppointment() {
      const that = this;
      var or = await that.isLoginAndIsband();
      if (or) {
        that.$router.push({ path: "/campus_choice" });
      }
    },
    // 跳转智能导诊
    goRecordCopy() {
      const that = this;

      this.$router.push({ path: "/smart_leading_examining" });
    },

    // 跳转消息通知
    goMessageNotification() {
      const that = this;

      this.$router.push({ path: "/message_notification" });
    },
  },
};
</script>

<style scoped>
.home {
}

.home_header {
  width: calc(100% - 2rem);
  padding: 0px 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  font-weight: bold;
  height: 2.8125rem;
  background-color: #fff;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10000;
}

.home_header div img {
  display: block;
  width: 1.4375rem;
  object-fit: contain;
}

.home_header div img:nth-of-type(1) {
  height: 1.3125rem;
}

.home_header div img:nth-of-type(2) {
  height: 1.5rem;
}

.home_header_right {
  position: relative;
}

.home_header_right .dot {
  width: 0.4375rem;
  height: 0.4375rem;
  background: rgba(247, 45, 35, 1);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

.notice_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: #a1aabc;
  margin: 1.0625rem 0 1.25rem 0;
}

.notice_box img {
  display: block;
  width: 3.875rem;
  height: 0.75rem;
  margin-right: 1.375rem;
  object-fit: contain;
}

.notice_box > marquee {
  width: calc(100% - 4rem);
}

.notice_box > marquee span {
  margin-right: 0.625rem;
}

.fast_channel {
  margin: 0.875rem 1rem 1.25rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fast_channel_l {
  width: calc(50% - 0.625rem);
  height: 9.3125rem;
  box-shadow: 0px 0px 15px 0px rgba(174, 206, 254, 0.3);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

.fast_channel_l img {
  display: block;
  width: 4.1875rem;
  height: 4.1875rem;
}

.fast_channel_l .bigtit {
  font-weight: bold;
  color: #3f4551;
  margin: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fast_channel_l .smalltit {
  font-weight: bold;
  color: #949fb4;
  font-size: 0.75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fast_channel_r {
  width: calc(50% - 0.625rem);
  height: 9.3125rem;
}

.fast_channel_r > div {
  height: 4.3125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5625rem;
  box-shadow: 0px 0px 15px 0px rgba(174, 206, 254, 0.3);
  border-radius: 5px;
}

.fast_channel_r > div > div {
  width: calc(100% - 3.4375rem);
}

.fast_channel_r > div:nth-of-type(1) {
  margin-bottom: 0.625rem;
}

.fast_channel_r > div > img {
  display: block;
  width: 3.4375rem;
  height: 3.4375rem;
}

.tws_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.tws_box > div {
  height: 6rem;
  width: calc(50% - 1.4375rem);
  box-shadow: 0px 0px 15px 0px rgba(174, 206, 254, 0.3);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5625rem;
  font-size: 1rem;
}

.tws_box > div:nth-of-type(1) > img {
  display: block;
  width: 3.4375rem;
  height: 3.4375rem;
}

.tws_box > div:nth-of-type(2) > img {
  display: block;
  width: 3.4375rem;
  height: 3.4375rem;
}

.tws_box_bigtit {
  font-weight: bold;
  color: #3f4551;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tws_box_smalltit {
  font-size: 0.75rem;
  color: #949fb4;
  margin-top: 0.375rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.banner_box {
  width: 100%;
  margin-bottom: 1.5rem;
}

.banner_box img {
  display: block;
  width: 100%;
  height: 5rem;
  object-fit: cover;
  border-radius: 2.5rem;
}

.serve_box {
  padding: 0 1rem;
  margin-bottom: 1.8125rem;
}

.serve_box_tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.3125rem;
}

.serve_box_tit > div {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
}

.serve_box_tit > div:nth-of-type(1) > span {
  width: 4px;
  height: 15px;
  background: rgba(90, 173, 251, 1);
  border-radius: 2px;
  margin-right: 0.8125rem;
  margin-top: 0.3125rem;
}

.serve_box_tit > div:nth-of-type(1) > div {
  font-weight: bold;
}

.serve_box_tit > div:nth-of-type(2) > span {
  font-size: 0.8125rem;
  color: #adb5c4;
  margin-right: 0.75rem;
}

.serve_box_tit > div:nth-of-type(2) > img {
  display: block;
  width: 0.5rem;
  height: 0.875rem;
}

.serve_box_info {
  padding: 1.0625rem 0rem 0.25rem 0rem;
  box-shadow: 0px 0px 15px 0px rgba(174, 206, 254, 0.3);
  border-radius: 6px;
}

.serve_box_info .iconbox {
  margin-bottom: 1.1875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  font-weight: 500;
  font-size: 16px;
  color: #3f4551;
}

.serve_box_info .iconbox img {
  display: block;
  width: 30px;
  height: 1.875rem;
  margin-bottom: 11px;
  object-fit: contain;
}

.swiper-demo-img img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.banner {
  position: relative;
  width: 100%;
  height: 180px;
  background: url(http://182.92.162.236:9000/ruoyi/ydkq/banner@2x.e2614c1d-s.png);
  background-position: center;
  background-size: cover;
}

.search-wrap {
  position: absolute;
  display: block;
  top: 16px;
  margin: 0 5%;
  text-decoration: none;
  box-sizing: border-box;
  width: 90%;
  height: 34px;
  border-radius: 18px;
  background: #fff;
}

.search-wrap::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  top: 9px;
  left: 10px;
  background: url(../../assets/img/search.png);
  background-position: center;
  background-size: cover;
}

.search {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  background: transparent;
  padding: 0 40px;
  border: none;
  outline: none;
}

/*//这里面可以自定义字体样式等，都是CSS基础*/
.rule {
  position: absolute;
  width: 0.82rem;
  height: 0.36rem;
  top: 0.08rem;
  right: 0rem;
  background: #111111;
}

.login {
  position: fixed;
  font-size: 24px;
  height: 160px;
  width: 360px;
  background-color: white;
  border-radius: 0.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.over {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  /*/ / 透明度为70 % */
  filter: alpha(opacity=70);
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #111111;
}

.login .iconbox {
  width: 50%;
  margin-top: 35px;
  margin-bottom: 1.1875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  font-weight: 500;
  font-size: 16px;
  color: #3f4551;
  float: left;
}

.login .iconbox img {
  display: block;
  width: 60px;
  height: 60px;
  margin-bottom: 11px;
  object-fit: contain;
}

.weui-dialog__btn_primary {
  color: #4790ff;
}
</style>
